<template>
  <div class="comment-management-container">
    <el-card class="comment-card">
      <div class="card-header">
        <h2 class="card-title">全部评论</h2>
      </div>
      <div class="toolbar">
        <div class="search-and-filter">
          <el-input
            v-model="searchQuery"
            placeholder="搜索评论内容"
            clearable
            class="search-input"
            @change="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>

      <div class="table-container">
        <el-table 
          :data="comments" 
          style="width: 100%" 
          v-loading="loading"
          border
          stripe
          highlight-current-row
        >
          <el-table-column prop="content" label="评论内容" min-width="400" show-overflow-tooltip>
            <template #default="scope">
              <div class="comment-content">
                {{ scope.row.content }}
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="评论人" width="180" align="center">
            <template #default="scope">
              <div class="user-info">
                <el-avatar :size="36" :src="scope.row.author_avatar || 'https://via.placeholder.com/150'" class="user-avatar" />
                <el-tag effect="plain" class="user-tag">{{ scope.row.author }}</el-tag>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="评论时间" width="180" align="center">
            <template #default="scope">
              <div class="time-info">
                <el-icon><Calendar /></el-icon>
                {{ $formatDateTime(scope.row.created_at) }}
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-tooltip content="删除评论" placement="top" :show-after="500">
                  <el-button type="danger" circle size="small" @click="handleDelete(scope.row)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          background
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Delete, Calendar } from '@element-plus/icons-vue'
import nework from '../../api/index'

const { communityApi, request } = nework

const comments = ref([])
const searchQuery = ref('')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const submitting = ref(false)

// 存储当前的搜索参数
const searchParams = reactive({
  search: ''
})
// 获取评论列表
const getCommentList = async (extraParams = {}) => {
  try {
    loading.value = true
    
    // 构建请求参数，合并分页、搜索和额外参数
    const params = {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      search: searchParams.search,
      ...extraParams
    }
    
    const { data } = await request(communityApi.getCommentList, params, 'POST')
    comments.value = data.data
    total.value = data.pagination.total
  } catch (error) {
    ElMessage.error('获取评论列表失败，请稍后重试')
    console.error('获取评论列表错误:', error)
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  // 更新搜索参数
  searchParams.search = searchQuery.value
  // 重置到第一页
  currentPage.value = 1
  // 获取数据
  getCommentList()
}
// 处理分页
const handleSizeChange = (size) => {
  pageSize.value = size
  getCommentList()
}

const handlePageChange = (page) => {
  currentPage.value = page
  getCommentList()
}

// 处理删除评论
const handleDelete = async (comment) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除这条评论吗？此操作不可恢复！`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    await request(communityApi.deleteComment, { commentId: comment.commentId }, 'POST')
    ElMessage.success('评论删除成功')
    // 刷新评论列表
    getCommentList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除评论失败，请重试')
      console.error('删除评论错误:', error)
    }
  }
}
onMounted(() => {
  getCommentList()
})
</script>

<style scoped lang="scss">
// 主题颜色
$primary-color: #409eff;
$primary-light: #ecf5ff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$background-color: #f5f7fa;
$text-color: #303133;
$text-secondary: #606266;
$text-light: #909399;
$border-color: #dcdfe6;

.comment-management-container {
  display: flex;
  justify-content: center;
}

.comment-card {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .card-header {
    margin-bottom: 20px;
    
    .card-title {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      color: $text-color;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(to bottom, $primary-color, lighten($primary-color, 10%));
        border-radius: 2px;
      }
    }
  }

  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .search-and-filter {
      display: flex;
      gap: 16px;
    }

    .search-input {
      width: 300px;
    }
  }

  .table-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }

  .pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
}

.comment-content {
  line-height: 1.5;
  color: $text-color;
  font-size: 14px;
  padding: 8px 0;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  .user-avatar {
    border: 2px solid #eaeaea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .user-tag {
    font-size: 13px;
    padding: 4px 8px;
    background-color: $primary-light;
    color: $primary-color;
    border-color: transparent;
  }
}

.time-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: $text-secondary;
  font-size: 13px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;

  .el-table__header-wrapper {
    th {
      background-color: #f5f7fa;
      font-weight: 600;
      color: $text-color;
    }
  }

  .el-table__row {
    td {
      padding: 12px 0;
    }
  }
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row) {
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba($primary-color, 0.05);
  }
}

:deep(.el-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .comment-card {
    padding: 16px;

    .toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;

      .search-and-filter {
        flex-direction: column;
      }

      .search-input {
        width: 100%;
      }
    }

    .table-container {
      overflow-x: auto;
    }
  }
}
</style>

